﻿@{
    ViewBag.Title = "DropDownList : Disable List Items";
}

<h2>DropDownList : Disable List Items</h2>

<h3>Sample</h3>

@{
    Html.Telerik().DropDownList()
        .Name("dropdownlist")
        .HtmlAttributes(new { style = "width:300px" })
        .ClientEvents(events => events.OnLoad("dropdownlist_onLoad"))
        .Render();
}
<br />
<button style="margin-top:10px;" onclick="disableDropDownListItems();">Disable List Items</button>

<script type="text/javascript">
    var categories=[
        { Value: 1,Text: 'Developer Tools' },
        { Value: 2,Text: 'Agile Project Management' },
        { Value: 3,Text: 'Software Testing Tools' },
        { Value: 4,Text: 'Software Testing Tools' },
        { Value: 5,Text: 'Web Content Management' },
        { Value: 6,Text: 'SharePoint' },
        { Value: 7,Text: 'Free Tools' },
        { Value: 8,Text: 'Unselectable' }
    ];

    dropdownlist_onLoad=function (e) {
        var dropdownlist=$('#dropdownlist').data('tDropDownList');
        dropdownlist.dataBind(categories);

    }

    disableDropDownListItems=function () {
        var dropdownlist=$('#dropdownlist').data('tDropDownList');

        dropdownlist.disableListItems([{ text: 'SharePoint' },{ text: 'Unselectable'}]);
    }

</script>